﻿<common:LayoutAwarePage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:local="using:RWSBeeldbank"
                        xmlns:data="using:RWSBeeldbank.Data"
                        xmlns:common="using:RWSBeeldbank.Common"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:bm="using:Bing.Maps"
                        xmlns:Controls="using:Callisto.Controls"
                        x:Name="pageRoot"
                        x:Class="RWSBeeldbank.DigitalItemDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
                        IsTabStop="false"
                        xmlns:callisto="using:Callisto.Controls"
                        mc:Ignorable="d">

    <common:LayoutAwarePage.Resources>
        <common:ListConverter x:Key="ListConverter" />
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <common:StringToVisibilityConverter x:Key="StringToVisibilityConverter" />

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource x:Name="itemsViewSource"
                              Source="{Binding Items}"
                              d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance IsDesignTimeCreatable=True, Type=data:SampleDataSource}}" />
    </common:LayoutAwarePage.Resources>

    <common:LayoutAwarePage.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                    <Button x:Name="PinMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource PinAppBarButtonStyle}"
                            Click="OnPinMediaObjectButtonClicked" />
                    <Button x:Name="DownloadMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource DownloadAppBarButtonStyle}"
                            Click="OnDownloadMediaObjectButtonClicked" />
                    <Button x:Name="LockScreenButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource SetLockScreenAppBarButtonStyle}"
                            Click="OnSetLockScreenButtonClicked" />
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToMediaObjectButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>

    <Grid Style="{StaticResource LayoutRootStyle}"
          DataContext="{Binding Group}"
          x:Name="rootVisual"
          x:Uid="rootVisual"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance IsDesignTimeCreatable=True, Type=data:SampleDataSource}}">

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <!-- FlipView used in portrait mode -->
        <FlipView x:Name="flipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  TabIndex="1"
                  Padding="0,-3,0,-3"
                  Margin="-3,0,3,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}" Tapped="flipView_Tapped">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                		Unloaded="StopLayoutUpdates"
                		x:Name="userControl">
                        <ScrollViewer x:Name="scrollViewer"
                			Style="{StaticResource HorizontalScrollViewerStyle}"
                			Grid.Row="1">

                            <VisualStateManager.VisualStateGroups>
                                <!-- Visual states reflect the application's view state inside the FlipView -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullScreenLandscape" />
                                    <VisualState x:Name="Filled" />

                                    <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image"
                								Storyboard.TargetProperty="MaxHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                									Value="400" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <!-- When snapped, the content is reformatted and scrolls vertically -->
                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                								Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                									Value="{StaticResource VerticalScrollViewerStyle}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image"
                								Storyboard.TargetProperty="MaxHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                									Value="160" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <!-- Three-column grid for item-detail layout -->
                            <Grid Margin="0,0,0,0"
                				Height="Auto">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="40" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <StackPanel Grid.Column="0"
                					HorizontalAlignment="Center"
                					VerticalAlignment="Center">
                                    <ProgressRing x:Name="ProgressRing"
                						Foreground="White"
                						Margin="0"
                						HorizontalAlignment="Center"
                						IsActive="True"
                						MaxHeight="50"
                						MinHeight="50"
                						MaxWidth="50"
                						MinWidth="50" />
                                    <TextBlock x:Uid="Loading"
                						Text="Loading data"
                						Style="{StaticResource BasicTextStyle}"
                						TextWrapping="Wrap"
                						TextAlignment="Center"
                						Padding="5"
                						HorizontalAlignment="Center"
                						Foreground="White" />
                                </StackPanel>

                                <Image x:Name="image"
                					Width="Auto"
                					Height="Auto"
                					Margin="0,0,0,0"
                					Stretch="Uniform"
                					HorizontalAlignment="Right"
                					DataContext="{StaticResource itemsViewSource}"
                					Source="{Binding LargeImage}"
                					Grid.Column="0" />

                                <Grid Margin="0,0,0,20"
                					Height="Auto"
                					Grid.Column="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="400" />
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="140" />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>

                                    <StackPanel HorizontalAlignment="Left"
                						Margin="0 20 20 0"
                						Grid.Column="0"
                						Grid.Row="0">
                                        <TextBlock Text="{Binding Title}"
                							Style="{StaticResource SubheaderTextStyle}"
                							DataContext="{Binding Group}" />
                                    </StackPanel>

                                    <RichTextBlock 
                                        x:Name="richTextBlock"
                                        Grid.Column="0"
                						Grid.Row="2"
                						Height="Auto"
                						Padding="0,0,20,0"
                						MaxWidth="400"
                						OverflowContentTarget="{Binding ElementName=NextRTB1}">

                                        <!--<Paragraph>
                                            <Run x:Uid="ID"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="ID" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Id}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>-->

                                        <Paragraph>
                                            <Run x:Uid="AltTitle"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Titel" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding AltTitle}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="Description"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Omschrijving" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Description}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="DateCreated"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Realisatie" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding DateCreated}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="Author"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Vervaardiger" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Author}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="Location"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Lokatie" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <InlineUIContainer>
                                                <Button x:Name="mapButton" Click="mapButton_Click" Visibility="Collapsed">Toon op kaart</Button>
                                            </InlineUIContainer>
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Location}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                            <Run Text="{Binding GPS}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                            <Run Text="{Binding Province}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="Keywords"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Trefwoorden" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Keywords}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="InventoryId"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Inventaris nummer" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding Title}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Uid="CopyRight"
                								FontSize="16"
                								FontWeight="Bold"
                								Text="Bronvermelding" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <Run Text="{Binding CopyRight}"
                								FontSize="16"
                								FontWeight="SemiLight" />
                                        </Paragraph>
                                        <Paragraph>
                                            <Run x:Name="Rating"
                                                 Text="Beoordeling"
                								 FontSize="16"
                								 FontWeight="Bold" />
                                        </Paragraph>
                                        <Paragraph Margin="0,0,0,16">
                                            <InlineUIContainer>
                                                <TextBlock x:Name="AlreadyRated"
                                                           FontSize="18"
                                                           FontWeight="Normal" 
                                                           Foreground="Yellow"
                                                           Text="" />
                                            </InlineUIContainer>
                                            <InlineUIContainer>
                                                <callisto:Rating 
                                                    x:Name="rate" 
                                                    ItemCount="5" 
                                                    Tapped="rate_Tapped" 
                                                    Background="{x:Null}" 
                                                    Foreground="#FFBEC52E" 
                                                    PointerOverFill="#FFE5EF52" 
                                                    PointerPressedFill="#FFEBEF52" 
                                                    HorizontalAlignment="Left" 
                                                    Margin="0"
                                                    />
                                            </InlineUIContainer>
                                        </Paragraph>
                                    </RichTextBlock>
                                    <RichTextBlockOverflow x:Name="NextRTB1"
                						OverflowContentTarget="{Binding ElementName=NextRTB2}"
                						Grid.Column="1"
                						Grid.Row="1"
                						Grid.RowSpan="2"
                						Padding="20,0,20,0"
                						MaxWidth="440" />
                                    <RichTextBlockOverflow x:Name="NextRTB2"
                						Grid.Column="2"
                						Grid.Row="1"
                						Grid.RowSpan="2"
                						Padding="20,0,20,0"
                						MaxWidth="440" />
                                </Grid>
                            </Grid>

                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
                
        <bm:Map Credentials="Agzynzm3397qqkK_hork8zheX6HaP_6Ul9Y4P8xXNhC3Pn1MAKHbOw8QtYsYxx0n"
                x:Name="myMapTop"
                ZoomLevel="12"
                Height="600"
                Width="600"
                Visibility="Collapsed"
                >
            <bm:Map.Center>
                <bm:Location Latitude="52"
                			 Longitude="5" />
            </bm:Map.Center>
            <bm:Pushpin x:Name="pushPin">
                <bm:MapLayer.Position>
                    <bm:Location Latitude="49"
                				 Longitude="5" />
                </bm:MapLayer.Position>
            </bm:Pushpin>
        </bm:Map>


        <!-- FlipView used in portrait mode -->
        <FlipView x:Name="portraitFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="-3,-3,20,0"                  
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource VerticalScrollViewerStyle}"
                                      Grid.Row="1">

                            <!-- Vertical StackPanel for item-detail layout -->
                            <StackPanel Orientation="Vertical"
                                        Margin="100,0,20,0">
                                <StackPanel Orientation="Vertical"
                                            HorizontalAlignment="Right"
                                            Margin="0 20 20 8">
                                    <TextBlock Text="{Binding Title}"
                                               Style="{StaticResource SubheaderTextStyle}"
                                               DataContext="{Binding Group}" />
                                </StackPanel>
                                <StackPanel Orientation="Vertical"
                                            VerticalAlignment="Top">
                                    <TextBlock x:Name="pageTitle"
                                               Text="{Binding AltTitle}"
                                               Style="{StaticResource PageHeaderTextStyle}" />
                                </StackPanel>
                                <StackPanel Orientation="Vertical">
                                    <Border BorderThickness="1"
                                            BorderBrush="White">
                                        <Image x:Name="image"
                                               Width="Auto"
                                               Margin="0"
                                               Source="{Binding TileImage}"
                                               Stretch="UniformToFill" />
                                    </Border>
                                </StackPanel>

                                <StackPanel Orientation="Vertical">
                                    <TextBlock x:Uid="Description"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Omschrijving"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Description}"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="DateCreated"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Realisatie"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding DateCreated}"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Author"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Vervaardiger"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Author}"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Location"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Lokatie"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Location}"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Province"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Provincie"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Province}"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Keywords"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Trefwoorden"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Keywords}"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Themes"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Thema's"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Themes}"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="InventoryId"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Inventaris nummer"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Title}"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="CopyRight"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Bronvermelding"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding CopyRight}"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <FlipView x:Name="snappedFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="-3,-3,0,0"
                  
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource VerticalScrollViewerStyle}"
                                      Grid.Row="1">

                            <!-- Vertical StackPanel for item-detail layout -->
                            <StackPanel Orientation="Vertical"
                                        Margin="20,0,20,0">
                                <StackPanel Orientation="Vertical"
                                            HorizontalAlignment="Right"
                                            Margin="0 20 20 60">
                                    <TextBlock Text="{Binding Title}"
                                               Style="{StaticResource SubheaderTextStyle}"
                                               DataContext="{Binding Group}" />
                                </StackPanel>
                                <StackPanel Orientation="Vertical">
                                    <Border BorderThickness="1"
                                            BorderBrush="White">
                                        <Image x:Name="image"
                                               Width="Auto"
                                               Margin="0"
                                               Source="{Binding TileImage}"
                                               Stretch="UniformToFill" />
                                    </Border>
                                </StackPanel>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock x:Uid="AltTitle"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Titel"
                                               Visibility="{Binding AltTitle, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding AltTitle}"
                                               Visibility="{Binding AltTitle, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Description"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Omschrijving"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Description}"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="DateCreated"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Realisatie"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding DateCreated}"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Author"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Vervaardiger"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Author}"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Location"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Lokatie"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Location}"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Province"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Provincie"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Province}"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Keywords"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Trefwoorden"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Keywords}"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Themes"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Thema's"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Themes}"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="InventoryId"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Inventaris nummer"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Title}"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="CopyRight"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Bronvermelding"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding CopyRight}"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <!-- Back button -->
        <Button x:Name="backButton"
                Click="GoBack"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Margin="36,56,0,0"
                IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                Style="{StaticResource BackButtonStyle}" />

    </Grid>
</common:LayoutAwarePage>
